<template>
    <div class="app-container">
        <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="查询时间">
                <el-date-picker v-model="dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="主体" prop="subjectId">
                <el-select @change="statisticsOne" v-model="queryParams.subjectId" placeholder="请选择主体" clearable>
                    <el-option v-for="(item, key) in subject_list" :key="key" :label="item.subjectName"
                        :value="item.subjectId" />
                </el-select>
            </el-form-item>
            <el-form-item label="电站" prop="stationId" v-if="queryParams.subjectId">
                <el-select @change="statisticsTwo" v-model="queryStics.stationId" placeholder="请选择电站" clearable>
                    <el-option v-for="(item, key) in station_list" :key="key" :label="item.stationName"
                        :value="item.stationId" />
                    <div class="select-pagination">
                        <pagination :layout="'total, prev, next'" v-show="station_total > 0" :total="station_total"
                            v-model:page="queryStat.pageNum" v-model:limit="queryStat.pageSize" @pagination="getStation" />
                    </div>
                </el-select>
            </el-form-item>
            <el-form-item label="设备" prop="devId" v-if="queryStics.stationId">
                <el-select @change="statisticsLast" v-model="queryStics.devId" placeholder="请选择设备" clearable>
                    <el-option v-for="(item, key) in dev_list" :key="key" :label="item.devName" :value="item.devId" />
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态" prop="state">
                <el-select @change="handleQuery" v-model="queryParams.state" placeholder="请选择订单状态" clearable>
                    <el-option v-for="dict in pay_status" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5"> </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="handleQuery"></right-toolbar>
        </el-row>

        <el-card v-if="is_statistics == true">
            <template #header>
                <span>电站/电桩收入统计</span>
            </template>
            <el-row class="info_cont">
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>订单金额：</label>
                    <span>￥{{ statistics.totalAmount ? statistics.totalAmount / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>实付金额：</label>
                    <span>￥{{ statistics.payerTotal ? statistics.payerTotal / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>退款金额：</label>
                    <span>￥{{ statistics.refundTotal ? statistics.refundTotal / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>成功订单数：</label>
                    <span>{{ statistics.successNum ? statistics.successNum : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>失败订单数：</label>
                    <span>{{ statistics.errorNum ? statistics.errorNum : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>充电时长：</label>
                    <span>{{ statistics.duration ? formatTime(statistics.duration) : "-" }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>充电电量：</label>
                    <span>{{ statistics.electricity ? parseFloat(statistics.electricity / 3600000).toFixed(3) : "0"
                    }}度</span>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mt10" v-if="is_search == true">
            <template #header>
                <span>{{ queryParams.start }}-{{ queryParams.end }} 收入统计</span>
            </template>
            <el-row class="info_cont">
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>总收入：</label>
                    <span>￥{{ income.total ? income.total / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>单次计费：</label>
                    <span>￥{{ income.onceChargeTotal ? income.onceChargeTotal / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>钱包支付：</label>
                    <span>￥{{ income.walletTotal ? income.walletTotal / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>余额支付：</label>
                    <span>￥{{ income.balanceTotal ? income.balanceTotal / 100 : 0 }}</span>
                </el-col>
                <el-col :lg="4" :sm="6" :xs="24">
                    <label>充值：</label>
                    <span>￥{{ income.rechargeTotal ? income.rechargeTotal / 100 : 0 }}</span>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mt10" v-if="is_search == true">
            <template #header>
                <span>订单统计</span>
            </template>
            <div id="orderBar"></div>
        </el-card> -->
    </div>
</template>

<script setup name="Statistics">
// import { getIncome, getOrderNum, getStatistics } from "@/api/trade/statistics";
// import { listSubject } from "@/api/subject/subject";
// import { listStation } from "@/api/equipment/station";
// import { listDev } from "@/api/equipment/dev";
// import * as echarts from "echarts";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
// const { pay_status } = proxy.useDict("pay_status");

// const loading = ref(true);
// const single = ref(true);
// const multiple = ref(true);
// const showSearch = ref(true);
// const dateRange = ref("")
// const queryParams = ref({
//     end: null,
//     start: null,
//     subjectId: null,
//     state: null,
// })
// const is_search = ref(false)
// const is_statistics = ref(false)
// const income = ref({})
// const order = ref({})
// const paramsDate = ref({})
// const queryStat = ref({})
// const queryDev = ref({})
// const querySubj = ref({})
// const queryStics = ref({
//     devId: null,
//     stationId: null,
//     subjectId: null,
// })
// const subject_list = ref([])
// const station_list = ref([])
// const station_total = ref(0)
// const dev_list = ref([])
// const statistics = ref([])
// const countData = ref([])
// const timeData = ref([])
// const user_info = ref([])

// function getIncomeInfo() {
//     getIncome(queryParams.value).then((response) => {
//         income.value = response.data;
//     });
// }
// // 查看订单数量
// function getOrderNumInfo() {
//     timeData.value = [];
//     countData.value = [];
//     if (queryParams.value.state == "") queryParams.value.state = null;
//     getOrderNum(queryParams.value).then((response) => {
//         order.value = response.data;
//         for (let i = 0; i < response.data.length; i++) {
//             timeData.value.push(response.data[i].date);
//             countData.value.push(response.data[i].count);
//         }
//         createBar();
//     });
// }
// // 查看订单统计
// function getStatisticsInfo() {
//     if (queryStics.value.subjectId == "") queryStics.value.subjectId = null;
//     if (queryStics.value.subjectId == null) {
//         return
//     }
//     loading.value = true;
//     getStatistics(queryStics.value).then((response) => {
//         is_statistics.value = true;
//         statistics.value = response.data;
//         loading.value = false;
//     });
// }
// // 获取主体列表
// function getSubject() {
//     loading.value = true;
//     listSubject(querySubj.value).then((response) => {
//         subject_list.value = response.data;
//         loading.value = false;
//     });
// }
// // 获取电站列表
// function getStation() {
//     loading.value = true;
//     listStation(queryStat.value).then((response) => {
//         station_list.value = response.rows;
//         station_total.value = response.total
//         loading.value = false;
//     });
// }
// // 获取设备列表
// function getDevList() {
//     loading.value = true;
//     listDev(queryDev.value).then((response) => {
//         dev_list.value = response.rows;
//         loading.value = false;
//     });
// }
// // 创建柱状图--订单数量变化
// function createBar() {
//     let line = echarts.getInstanceByDom(document.getElementById("orderBar"));
//     if (line != null) {
//         // 如果不存在，就进行初始化
//         line.dispose();
//     }
//     line = echarts.init(document.getElementById("orderBar"));
//     const option = {
//         title: {
//             text:
//                 queryParams.value.start + "-" + queryParams.value.end + "订单统计",
//             left: "center",
//         },
//         tooltip: {
//             trigger: "axis",
//         },
//         xAxis: {
//             type: "category",
//             data: timeData.value,
//         },
//         yAxis: {
//             type: "value",
//         },
//         series: [
//             {
//                 data: countData.value,
//                 type: "bar",
//                 label: {
//                     show: true,
//                     position: "outside",
//                 },
//             },
//         ],
//     };
//     line.setOption(option);
// }
// // 格式化时间
// function formatTime(time) {
//     let nowDate = "";
//     if (time == 0) {
//         return "-";
//     }
//     let hour = Math.floor(time / 60 / 60, 0);
//     if (hour > 0) {
//         nowDate += `${hour}小时`;
//     }
//     let minute = Math.floor((time / 60) % 60, 0);
//     if (minute > 0) {
//         nowDate += `${minute}分钟`;
//     }
//     let second = Math.floor(time % 60, 0);
//     if (second > 0) {
//         nowDate += `${second}秒`;
//     }
//     return nowDate;
// }
// function statisticsOne() {
//     if (queryParams.value.subjectId) {
//         // queryStat.value.subjectId = queryParams.value.subjectId;
//         getStation();
//     }
//     // queryStics.value.subjectId = queryParams.value.subjectId;
//     getStatisticsInfo();
//     handleQuery();
// }
// function statisticsTwo() {
//     if (queryStics.value.stationId) {
//         // queryDev.value.stationId = queryStics.value.stationId;
//         getDevList();
//     }
//     // queryStics.value.subjectId = queryParams.value.subjectId;
//     getStatisticsInfo();
// }
// function statisticsLast() {
//     // queryStics.value.subjectId = queryParams.value.subjectId;
//     getStatisticsInfo();
// }
// // 搜索按钮操作
// function handleQuery() {
//     let data = proxy.addDateRange(paramsDate.value, dateRange.value);
//     queryParams.value.start = data.params.beginTime;
//     queryParams.value.end = data.params.endTime;
//     if (queryParams.value.start == "") queryParams.value.start = null;
//     if (queryParams.value.end == "") queryParams.value.end = null;
//     if (queryParams.value.start == null && queryParams.value.end == null) {
//         proxy.$modal.notifyWarning("请选择时间氛围后查询");
//         return;
//     }
//     if (queryParams.value.subjectId == "") queryParams.value.subjectId = null;
//     if (queryParams.value.subjectId == null) {
//         proxy.$modal.notifyWarning("请选择运营商后查询");
//         return;
//     }
//     is_search.value = true;
//     getIncomeInfo();
//     getOrderNumInfo();
// }
// // 重置按钮操作
// function resetQuery() {
//     proxy.resetForm("queryForm");
//     handleQuery();
// }

// user_info.value = window.localStorage.getItem("user_info")
// const beginTime = route.query.beginTime;
// const endTime = route.query.endTime;
// if (beginTime != undefined && endTime != undefined) {
//     dateRange.value = [
//         decodeURIComponent(beginTime),
//         decodeURIComponent(endTime),
//     ];
// }
// queryParams.value.subjectId = user_info.value.subjectId
// queryStics.value.subjectId = user_info.value.subjectId
// getStation();
// getStatisticsInfo();
// getSubject();

</script>
